// 布局管理器 - 管理折叠展开和响应式布局
const LayoutManager = {
    state: {
        isMobile: false,      // ≤1000px 移动端
        isTablet: false,      // 1001-1400px 平板端
        leftCollapsed: false,
        rightCollapsed: false,
        mobileMenuOpen: false,
        mobileDetailOpen: false
    },
    
    init: function() {
        this.checkViewport();
        this.bindEvents();
        window.addEventListener('resize', () => this.checkViewport());
    },
    
    checkViewport: function() {
        const wasMobile = this.state.isMobile;
        const wasTablet = this.state.isTablet;
        
        // 使用统一的设备检测
        this.state.isMobile = DeviceDetector.isMobile();
        this.state.isTablet = DeviceDetector.isTablet();
        
        // 只有在模式切换时才执行switchMode
        if (wasMobile !== this.state.isMobile || wasTablet !== this.state.isTablet) {
            this.switchMode();
        }
    },
    
    switchMode: function() {
        const $columnOne = $('.column-one');
        const $columnThree = $('.column-three');
        const $overlay = $('#mobile-overlay');
        const $rightBtn = $('#collapse-right-btn');
        const $leftBtn = $('#collapse-left-btn');
        
        if (this.state.isMobile) {
            // 切换到移动端模式
            // 移除PC端的collapsed类
            $columnOne.removeClass('collapsed');
            $columnThree.removeClass('collapsed');
            
            // 重置移动端状态
            this.state.mobileMenuOpen = false;
            this.state.mobileDetailOpen = false;
            $columnOne.removeClass('mobile-show');
            $columnThree.removeClass('mobile-show');
            $overlay.removeClass('show');
            $leftBtn.removeClass('show-detail');
            $leftBtn.attr('title', '展开账户列表');
            
            // 重置按钮图标（移动端不需要特殊设置，CSS会覆盖）
            $leftBtn.find('i').removeClass('layui-icon-right').addClass('layui-icon-left');
            $rightBtn.find('i').removeClass('layui-icon-left').addClass('layui-icon-right');
        } else if (this.state.isTablet) {
            // 切换到平板模式（1001-1400px）
            // 左侧使用悬浮菜单，右侧保持PC布局
            $columnOne.removeClass('collapsed');
            $columnThree.removeClass('collapsed');
            
            // 重置平板状态
            this.state.mobileMenuOpen = false;
            this.state.mobileDetailOpen = false;
            $columnOne.removeClass('mobile-show');
            $columnThree.removeClass('mobile-show');
            $overlay.removeClass('show');
            $leftBtn.removeClass('show-detail');
            $leftBtn.attr('title', '展开账户列表');
            
            // 左侧按钮使用菜单图标（CSS会处理），右侧保持箭头
            $leftBtn.find('i').removeClass('layui-icon-right').addClass('layui-icon-left');
            if (this.state.rightCollapsed) {
                $columnThree.addClass('collapsed');
                $rightBtn.find('i').removeClass('layui-icon-right').addClass('layui-icon-left');
            } else {
                $rightBtn.find('i').removeClass('layui-icon-left').addClass('layui-icon-right');
            }
        } else {
            // 切换到PC端模式（>1400px）
            // 移除移动端/平板的mobile-show类
            $columnOne.removeClass('mobile-show');
            $columnThree.removeClass('mobile-show');
            $overlay.removeClass('show');
            $leftBtn.removeClass('show-detail');
            $leftBtn.attr('title', '折叠/展开左侧栏');
            
            // 恢复PC端折叠状态
            if (this.state.leftCollapsed) {
                $columnOne.addClass('collapsed');
                $leftBtn.find('i').removeClass('layui-icon-left').addClass('layui-icon-right');
            } else {
                $leftBtn.find('i').removeClass('layui-icon-right').addClass('layui-icon-left');
            }
            
            if (this.state.rightCollapsed) {
                $columnThree.addClass('collapsed');
                $rightBtn.find('i').removeClass('layui-icon-right').addClass('layui-icon-left');
            } else {
                $rightBtn.find('i').removeClass('layui-icon-left').addClass('layui-icon-right');
            }
        }
    },
    
    bindEvents: function() {
        const self = this;
        
        // 左侧折叠按钮
        $('#collapse-left-btn').on('click', function() {
            self.toggleLeft();
        });
        
        // 右侧折叠按钮
        $('#collapse-right-btn').on('click', function() {
            self.toggleRight();
        });
        
        // 遮罩层点击关闭
        $('#mobile-overlay').on('click', function() {
            if (self.state.mobileMenuOpen) {
                self.closeMobileMenu();
            }
        });
        
        // 移动端搜索按钮
        $('#mobile-search-btn').on('click', function() {
            const keyword = $('#mobile-keyword-search-input').val();
            const sender = $('#mobile-sender-search-input').val();
            
            // 同步到PC端搜索框
            $('#keyword-search-input').val(keyword);
            $('#sender-search-input').val(sender);
            
            // 触发搜索
            $('#search-btn').trigger('click');
            
            // 关闭移动端菜单
            self.closeMobileMenu();
        });
    },
    
    toggleLeft: function() {
        // 实时检测设备类型，不依赖缓存的状态
        const isMobileOrTablet = DeviceDetector.isMobile() || DeviceDetector.isTablet();
        
        if (isMobileOrTablet) {
            // 移动端/平板端：根据当前状态执行不同操作
            if (this.state.mobileDetailOpen) {
                // 如果详情已打开，点击返回到邮件列表
                this.closeMobileDetail();
            } else if (this.state.mobileMenuOpen) {
                // 如果账户列表已打开，关闭它
                this.closeMobileMenu();
            } else {
                // 否则，打开账户列表
                this.openMobileMenu();
            }
        } else {
            // PC端：折叠/展开左侧栏
            const $columnOne = $('.column-one');
            const $btn = $('#collapse-left-btn i');
            
            this.state.leftCollapsed = !this.state.leftCollapsed;
            
            if (this.state.leftCollapsed) {
                $columnOne.addClass('collapsed');
                $btn.removeClass('layui-icon-left').addClass('layui-icon-right');
            } else {
                $columnOne.removeClass('collapsed');
                $btn.removeClass('layui-icon-right').addClass('layui-icon-left');
            }
        }
    },
    
    toggleRight: function() {
        // 实时检测设备类型
        const isMobile = DeviceDetector.isMobile();
        
        if (isMobile) {
            // 移动端：切换详情显示状态
            if (this.state.mobileDetailOpen) {
                // 当前详情已打开，点击返回到邮件列表
                this.closeMobileDetail();
            } else {
                // 当前在邮件列表，点击打开详情（需要先有选中的邮件）
                const hasContent = $('#email-detail-container .email-detail').length > 0;
                if (!hasContent) {
                    layui.layer.msg('请先选择一封邮件', {icon: 7, time: 1500});
                    return;
                }
                this.openMobileDetail();
            }
        } else {
            // PC端：折叠/展开右侧栏
            const $columnThree = $('.column-three');
            const $btn = $('#collapse-right-btn i');
            
            this.state.rightCollapsed = !this.state.rightCollapsed;
            
            if (this.state.rightCollapsed) {
                $columnThree.addClass('collapsed');
                $btn.removeClass('layui-icon-right').addClass('layui-icon-left');
            } else {
                $columnThree.removeClass('collapsed');
                $btn.removeClass('layui-icon-left').addClass('layui-icon-right');
            }
        }
    },
    
    openMobileMenu: function() {
        this.state.mobileMenuOpen = true;
        $('.column-one').addClass('mobile-show');
        $('#mobile-overlay').addClass('show');
    },
    
    closeMobileMenu: function() {
        this.state.mobileMenuOpen = false;
        $('.column-one').removeClass('mobile-show');
        $('#mobile-overlay').removeClass('show');
    },
    
    openMobileDetail: function() {
        this.state.mobileDetailOpen = true;
        $('.column-three').addClass('mobile-show');
        
        // 移动端：左侧按钮变为返回按钮
        const $leftBtn = $('#collapse-left-btn');
        $leftBtn.addClass('show-detail');
        $leftBtn.attr('title', '返回邮件列表');
    },
    
    closeMobileDetail: function() {
        this.state.mobileDetailOpen = false;
        $('.column-three').removeClass('mobile-show');
        
        // 移动端：左侧按钮恢复为展开账户按钮
        const $leftBtn = $('#collapse-left-btn');
        $leftBtn.removeClass('show-detail');
        $leftBtn.attr('title', '展开账户列表');
    }
};